import {Icon} from 'antd'
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

export default class Main extends React.Component{
	constructor(props){
		super(props);
	}
	
	
	render(){
		const {icon = '',
			iconBackground = '#0079DE',
            showChange = true,
			itemWidth,
			isClick = false,
			showNumTitle=false,
			title = '',
			num = '',
			suffix = getLabel(386746,'对比上一年同期'),
			isUp = 2,
			percent = ''
		} = this.props;

		const iconStyle = (isUp === 1) ? {"color":"#E9612B","marginRight" : "5px"} : ((isUp === 0) ? {"color" : "#7DC756","marginRight" : "5px"} :{"color" : "#868686","marginRight" : "5px"})
		const numClassName = isClick ? "num-click" : '';
		const numtitle = showNumTitle ? num : (isClick ? getLabel(386745,'点击查看流程清单'):'');

		return (
			<div className="c-item" style={{width:itemWidth}}>
				<div className="c-item-icon">
					<div className="c-item-icon-circle-base" style={{"background": iconBackground}}>
						<i className={icon}/>
					</div>
				</div>
				<div className="c-item-info">
					<ul>
						<li className="item-info-title">{title}</li>
						<li className={`item-info-num`}>
							<span title={numtitle} className={`${numClassName} num-format`} onClick={this.openListModal.bind(this)}>{num}</span>
						</li>
						{showChange &&
							<li>
								<div>
									{isUp === 1 && <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@dabwg3`} type="caret-up" style={iconStyle}/> }
									{isUp === 0 && <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@89btq3`} type="caret-down" style={iconStyle}/>}
									<span style={iconStyle}>{percent}</span>
									<span style={{"color":"#868686"}}>{suffix}</span>
								</div>
							</li>
						}
					</ul>
				</div>
			</div>
		)
	}
	
	openListModal(){
		const {isClick=false,setListModalVisible,clickPara,showDetailModal} = this.props;
		if(isClick){
			typeof setListModalVisible === 'function' && setListModalVisible(true,{},clickPara);
			typeof showDetailModal === 'function' && showDetailModal(3,clickPara);
		}
	}
}
